<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机射击游戏</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        // 获取画布和上下文
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        // 设置画布大小
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 玩家信息
        const player = {
            x: canvas.width / 2,
            y: canvas.height - 50,
            width: 50,
            height: 50,
            speed: 5,
            bullets: [],
            score: 0,
            bulletLevel: 1,
            bulletWidth: 5,
            health: 100,
            armor: 0
        };

        // 敌人信息
        const enemies = [];
        const enemySpeed = 2;
        const enemySpawnInterval = 100;
        let enemySpawnTimer = 0;

        // 移动玩家
        function movePlayer(dx) {
            player.x += dx;
            // 边界检查
            if (player.x < 0) {
                player.x = 0;
            } else if (player.x > canvas.width - player.width) {
                player.x = canvas.width - player.width;
            }
        }

        // 发射子弹
        function shoot() {
            const bullet = {
                x: player.x + player.width / 2 - player.bulletWidth / 2,
                y: player.y,
                width: player.bulletWidth,
                height: 20,
                speed: 10
            };
            player.bullets.push(bullet);
        }

        // 生成敌人
        function spawnEnemy() {
            const enemy = {
                x: Math.random() * (canvas.width - 50),
                y: -50,
                width: 50,
                height: 50
            };
            enemies.push(enemy);
        }

        // 更新敌人位置
        function updateEnemies() {
            for (let i = enemies.length - 1; i >= 0; i--) {
                const enemy = enemies[i];
                enemy.y += enemySpeed;
                // 检查敌人是否超出屏幕
                if (enemy.y > canvas.height) {
                    enemies.splice(i, 1);
                }
                // 检查子弹与敌人的碰撞
                for (let j = player.bullets.length - 1; j >= 0; j--) {
                    const bullet = player.bullets[j];
                    if (
                        bullet.x < enemy.x + enemy.width &&
                        bullet.x + bullet.width > enemy.x &&
                        bullet.y < enemy.y + enemy.height &&
                        bullet.y + bullet.height > enemy.y
                    ) {
                        // 子弹击中敌人
                        enemies.splice(i, 1);
                        player.bullets.splice(j, 1);
                        player.score++;
                        checkPowerUps();
                        break;
                    }
                }
            }
        }

        // 检查是否获得额外能力
        function checkPowerUps() {
            if (player.score % 10 === 0) {
                // 每消灭 10 个敌人，子弹升级
                player.bulletLevel++;
                player.bulletWidth += 2;
            }
            if (player.score % 20 === 0) {
                // 每消灭 20 个敌人，获得额外生命值
                player.health += 20;
            }
            if (player.score % 30 === 0) {
                // 每消灭 30 个敌人，护甲提升
                player.armor += 10;
            }
        }

        // 更新子弹位置
        function updateBullets() {
            for (let i = player.bullets.length - 1; i >= 0; i--) {
                const bullet = player.bullets[i];
                bullet.y -= bullet.speed;
                // 检查子弹是否超出屏幕
                if (bullet.y < 0) {
                    player.bullets.splice(i, 1);
                }
            }
        }

        // 绘制玩家
        function drawPlayer() {
            ctx.fillStyle = 'blue';
            ctx.fillRect(player.x, player.y, player.width, player.height);
        }

        // 绘制敌人
        function drawEnemies() {
            ctx.fillStyle = 'red';
            for (const enemy of enemies) {
                ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
            }
        }

        // 绘制子弹
        function drawBullets() {
            ctx.fillStyle = 'yellow';
            for (const bullet of player.bullets) {
                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
            }
        }

        // 绘制分数和状态
        function drawScoreAndStatus() {
            ctx.fillStyle = 'black';
            ctx.font = '20px Arial';
            ctx.fillText(`Score: ${player.score}`, 10, 30);
            ctx.fillText(`Health: ${player.health}`, 10, 60);
            ctx.fillText(`Armor: ${player.armor}`, 10, 90);
            ctx.fillText(`Bullet Level: ${player.bulletLevel}`, 10, 120);
        }

        // 主游戏循环
        function gameLoop() {
            // 清除画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 生成敌人
            enemySpawnTimer++;
            if (enemySpawnTimer >= enemySpawnInterval) {
                spawnEnemy();
                enemySpawnTimer = 0;
            }

            // 更新敌人和子弹位置
            updateEnemies();
            updateBullets();

            // 绘制玩家、敌人、子弹和分数
            drawPlayer();
            drawEnemies();
            drawBullets();
            drawScoreAndStatus();

            // 循环调用游戏循环
            requestAnimationFrame(gameLoop);
        }

        // 触摸事件处理
        let touchStartX = 0;
        canvas.addEventListener('touchstart', (e) => {
            touchStartX = e.touches[0].clientX;
        });

        canvas.addEventListener('touchmove', (e) => {
            const touchX = e.touches[0].clientX;
            const dx = touchX - touchStartX;
            movePlayer(dx);
            touchStartX = touchX;
        });

        canvas.addEventListener('touchend', () => {
            shoot();
        });

        // 启动游戏循环
        gameLoop();
    </script>
</body>

</html>